<template>
  <div class="container">
    <el-container class="count">
      <!-- 主体部分 -->
      <el-main>
        <!-- 表单组件 -->
        <form-item @changetext="ques($event)" />
        <!-- 表单组件 -->
        <!-- 数据总数 -->
        <el-row class="data">
          <span style="margin-left: 20px"
            ><i class="el-icon-info"></i> 数据一共{{
              this.tableData.length
            }}条</span
          ></el-row
        >
        <!-- 数据总数 -->
        <!-- 表格部分 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 10px">
          <el-table-column prop="number" label="试题编号" width="140">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="100">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            :formatter="formatterss"
            label="题型"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="question" label="题干" width="180">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="160">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            :formatter="difficultys"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="{ row }">
              <el-button
                @click="handers(row)"
                icon="el-icon-view"
                circle
                class="el-buttonone"
              ></el-button>
              <!-- 修改的按钮 -->
              <el-button
                @click="toEdit(row)"
                icon="el-icon-edit"
                circle
                class="el-buttontwo"
              ></el-button>
              <el-button
                icon="el-icon-delete"
                circle
                class="el-buttonthree"
                @click="deleteitem(row)"
              ></el-button>
              <el-button
                @click="selected(row.id)"
                icon="el-icon-check"
                circle
                class="el-buttonfour"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格部分 -->
        <!-- 放置分页 -->
            <el-row type="flex" justify="end">
                <el-col :span="11" :push="2">
            <el-pagination
              @current-change="handle"
              background
              layout="prev ,pager, next,  sizes,jumper "
              :page-sizes="[10]"
              :page-size="2000"
              :total="20"
            >
            </el-pagination>
          </el-col>
              </el-row
        >
        <!-- 预览弹框的子组件 -->
        <questions-preview :showDialog="showDialog" ref="showing"/>
      </el-main>
      <!-- 主体部分 -->
    </el-container>
  </div>
</template>

<script>
import formItem from "./components/formitem";
import { list, remove, choiceAdd } from "@/api/hmmm/questions.js";
import { questionType, difficulty } from "@/api/hmmm/constants.js";
import questionsPreview from "@/module-hmmm/components/questions-preview";
export default {
  data() {
    return {
      tableData: [],
      pages: {
        page: 0,
        pagesize: 6,
      },
      //  子组件的弹出框
      showDialog: false,
    };
  },
  components: {
    formItem,
    questionsPreview,
  },
  created() {
    this.list();
  },
  methods: {
    async list() {
      const { data } = await list();
      this.tableData = data.items;
      // console.log(data.items);
    },
    formatterss(row, column, cellValue, index) {
      let label = "";
      questionType.forEach((item) => {
        if (cellValue == item.value) {
          label = item.label;
        }
      });
      return label;
    },
    // 点击预览的时候调用子组件方法
    handers(row) {
      this.showDialog = true;
      this.$refs.showing.aaa(row)
      // console.log(row.id);
    },
    difficultys(row, column, cellValue, index) {
      let label = "";
      difficulty.forEach((item) => {
        if (cellValue == item.value) {
          label = item.label;
        }
      });
      return label;
    },
    handle(newpage) {
      this.page = newpage;
      this.list();
    },
    deleteitem(row) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await remove(row);
          this.list();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    selected(id) {
      this.$confirm("此操作将该题目加入精选, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await choiceAdd({ id, choiceState: 1 });
          this.list();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消添加",
          });
        });
    },
    async ques(event) {
      console.log(event);
      const { data } = await list({ ...event, ...this.pages });
      this.tableData = data.items;
      // console.log(data.items);
    },
    toEdit(row) {
      this.$router.push({
        path: "new",
        query: {
          id: row.id,
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  margin: 0;
  padding: 0;
}
.count {
  margin-top: 15px;
  padding: 0 20px;
  width: 100%;
}
.el-main {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-bottom: 10px;
}

.data {
  width: 100%;
  height: 40px;
  background-color: #f4f4f5;
  color: #989ba1;
  line-height: 40px;
  border-radius: 10px;
}
.el-buttonone {
  color: #9facff;
  background-color: #ecf5ff;
}
.el-buttontwo {
  color: #a2c779;
  background-color: #f0f9eb;
}
.el-buttonthree {
  color: #f78181;
  background-color: #fef0f0;
}
.el-buttonfour {
  color: #ecac66;
  background-color: #fdf6ec;
}
.el-pager li {
  background: blue !important;
}
</style>
